<template>
  <!-- 自定义弹出框（开发完成） -->
  <div class="dialog-container" :style="{ 'z-index': zIndex }">
    <vue-drag-resize
      class="dialog"
      :w="width"
      :h="height"
      :x="x"
      :y="y"
      :isResizable="false"
      :isDraggable="isDraggable"
      v-if="show"
      @dragging="handleDragging"
      ref="dialog"
    >
      <div class="right-top clearfix">
        <i class="close el-icon-close" @click.stop="onClickClose()"></i>
      </div>
      <div class="header" v-if="showHeader">
        <slot name="header"></slot>
      </div>
      <div
        class="content"
        :class="showHeader ? '' : 'no-header'"
        @click="onClickContent"
        @mouseenter="handleMouseEnterContent"
        @mouseleave="handleMouseLeaveContent"
        @blur="handleMouseLeaveContent"
      >
        <slot></slot>
      </div>
    </vue-drag-resize>
  </div>
</template>

<script>
  import VueDragResize from "vue-drag-resize";
  import bus from "./bus";

  export default {
    components: { VueDragResize },
    props: {
      width: {
        type: Number,
        default: 300,
      },
      height: {
        type: Number,
        default: 100,
      },
      // 是否显示标题栏
      showHeader: {
        type: Boolean,
        default: false,
      },
      // 点击内容是否可移动
      isContentMove: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        show: false,
        zIndex: 0,
        maxIndex: 0,
        x: 0,
        y: 0,
        isDraggable: true,
      };
    },
    mounted() {
      // document.body.appendChild(this.$el);
      bus.$on("now-index", (res) => {
        this.maxIndex = res;
      });
    },
    methods: {
      onClickContent(e) {
        this.setToTop();
      },
      onClickClose() {
        this.close();
      },
      handleDragging(e) {
        // console.log(e);
        if (!this.isDraggable) {
          return;
        }
        if (this.zIndex < this.maxIndex) {
          this.setToTop();
        }
      },
      handleMouseEnterContent(e) {
        if (!this.isContentMove) {
          this.isDraggable = false;
        }
      },
      handleMouseLeaveContent(e) {
        if (!this.isContentMove) {
          this.isDraggable = true;
        }
      },
      setToTop() {
        this.zIndex = this.maxIndex;
        this.zIndex++;
        this.emitNowIndex();
      },
      open() {
        // x,y
        this.x = (document.documentElement.clientWidth - this.width) / 2;
        this.y = (document.documentElement.clientHeight - this.height) / 2;
        // console.log(document.documentElement.clientWidth);
        // index
        this.zIndex = this.maxIndex;
        this.zIndex++;
        this.show = true;
        document.body.appendChild(this.$el);
        this.emitNowIndex();
        this.emitAfterOpened();
      },
      close() {
        this.show = false;
        document.body.removeChild(this.$el);
      },
      emitNowIndex() {
        this.$emit("nowIndex", this.zIndex);
        bus.$emit("now-index", this.zIndex);
      },
      emitAfterOpened() {
        this.$emit("afterOpened", this);
      },
    },
    beforeDestroy() {
      this.close();
    },
  };
</script>

<style lang="less" scoped>
.dialog-container {
  height: 0px;
  top: 0px;
  left: 0px;
  overflow: visible;
  position: absolute;
}
.dialog {
  background-color: #fff;
  // width: 100%;
  // height: 100%;
  border-radius: 4px;
  overflow: hidden;
  cursor: auto;
  // position: relative;
  .right-top {
    position: absolute;
    right: 6px;
    top: 6px;
    z-index: 1;
    .close {
      width: 20px;
      height: 20px;
      line-height: 20px;
      float: right;
      display: block;
      font-size: 18px;
      text-align: right;
      transition: all 0.3s;
      &:hover {
        color: #5cb6ff;
      }
    }
  }
  .header {
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    background-color: #f0f0f0;
    position: absolute;
    width: 100%;
    overflow: hidden;
    cursor: move;
    z-index: 1;
  }
  .content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;
    // box-sizing: border-box;
    padding: 30px 0px 0px 0px;
    overflow: auto;
    z-index: 0;
    &.no-header {
      padding: 0px 0px 0px 0px;
    }
  }
}
.dialog-default-pos {
  left: 10px;
  top: 10px;
}
</style>
